import React, { Component, useState } from 'react'
import {nanoid} from 'nanoid'
import PubSub from 'pubsub-js'
import './App.css'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import { useEffect } from 'react'
export default function App() {
    let [todos, setTodos] = useState([{
        id:nanoid(),
        title:'吃饭',
        isDone:true
    }])

    useEffect(()=>{
        // 添加
        const addId = PubSub.subscribe('addTodo', (msg, title)=>{
            // 创建todo
            // const todo = {
            //     id:nanoid(),
            //     title,
            //     isDone:false
            // }
            // 添加设置状态
            //setTodos([...todos, todo]) // 因为有闭包，所以永远只能取到该作用域下todos的初始值
            // 必须要取最新的todos，进行操作

            setTodos(todos=>{
                const todo = {
                    id:nanoid(),
                    title,
                    isDone:false
                }
                return [...todos, todo]
            })
        })

        // 根据id删除
        const deleteId = PubSub.subscribe('deleteItem', (msg, id)=>{
            setTodos(todos=>{
                return todos.filter(todo=>todo.id !== id)
            })
        })

        // 单条记录改变完成状态
        const checkItemId = PubSub.subscribe('checkItem', (msg, todo)=>{
            setTodos(todos=>{
                todo.isDone = !todo.isDone
                return [...todos]
            })
        })

        return ()=>{
            PubSub.unsubscribe(addId)
            PubSub.unsubscribe(deleteId)
            PubSub.unsubscribe(checkItemId)
        }


    },[])
    return (
        <div className="todo-container">
            <div className="todo-wrap">
                <Header />
                <List todos={todos}/>
                <Footer />
            </div>
        </div>
    )
}
